<template>
  <div class="animate__animated animate__fadeInUp relative w-full bg-#F6F6F6 min-h-1000px">
    <div class="w-full absolute left-0 top-0 bg h-600px z--1 bg"></div>
    <div class="mx-auto w-1200px pt-46px">
      <SearchPositionSearchBox v-model="searchKeys" @search="onInit" />
      <div class="w-full mt-20px">
        <SearchPositionItem v-for="(item, index) in list" :key="index" :data="item" />
      </div>
      <div class="pt-42px pb-45px flex items-center justify-center">
        <a-pagination
          :current="pageInfo.pageNum"
          :pageSize="pageInfo.pageSize"
          hideOnSinglePage
          :total="pageInfo.pageTotal"
          @change="onPageChange"
          :showQuickJumper="false"
          :showSizeChanger="false"
          show-less-items
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import CompanyService from '@/api/company';
import { usePager } from '@/hooks/usePager';
const { query } = useRoute();
const searchKeys = reactive({
  areaCode: null,
  cityCode: null,
  industryCode: [] as any,
  scaleCode: null,
  typeCode: null,
  positionCodes: [] as any,
  name: query?.key || '',
  salary: null,
  degreeCode: null,
  workExpCode: null,
  priorityCode: null,
  jobType: query?.jobType || null,
  flagColor: [] as any,
  categoryId: null
});
const { pageInfo } = usePager({
  pageNum: 1,
  pageTotal: 0,
  pageSize: 10,
  pageLoading: false,
});
const list = ref<any>([]);

function onInit() {
  pageInfo.pageNum = 1
  init()
}

async function init() {
  const resp = await CompanyService.selectHrJobList({
    ...searchKeys,
    ...pageInfo,
  });
  if (resp.code === 200) {
    pageInfo.pageTotal = resp.data?.total || 0;
    list.value = resp.data?.records || [];
  }
}
function onPageChange(currentPage: number, pageSize: number) {
  pageInfo.pageNum = currentPage;
  pageInfo.pageSize = pageSize;
  init();
  window.scrollTo({ top: 0});
}
onMounted(() => {
  init();
});
</script>

<style lang="scss" scoped>
.bg {
  background: linear-gradient(0deg, #f6f6f6, #eaf1fe);
}
</style>
